<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="costItem.operate ? true : false"
        @close="costItem.operate=''"
        >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ costItem.operate ? t(costItem.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="costItem.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + costItem.operate + '-form'"
                :style="'width: calc(100% -  100px)'"
            >
                <el-form
                    v-if="!costItem.loading"
                    ref="formRef"
                    :model="costItem.form"
                    label-position="right"
                    :label-width="'120px'"
                    :rules="rules"
                    class="flex"
                >
                <FormItem :label="t('xBjbody.BJNO')" type="string" v-model="costItem.form!.BJNO" prop="BJNO" :input-attr="{ placeholder: t('Please input field', { field: t('xBjbody.BJNO') }),disabled:true }" />
                <FormItem :label="t('xBjbody.LINEID')" type="number" prop="LINEID" v-model.number="costItem.form!.LINEID" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('xBjbody.LINEID') }),disabled:true }" />
                <!-- <FormItem 
                :label="t('xBjbody.COSTTYPE')" 
                v-model="costItem.form!.COSTTYPE" 
                prop="COSTTYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=bjcosttype'
                }"
                /> -->
                <!-- <el-form-item></el-form-item> -->
                <FormItem 
                :label="t('xBjbody.ITEMCODE')" 
                v-model="costItem.form!.ITEMCODE" 
                prop="ITEMCODE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=itemcode'
                }"
                />
                <!-- <div style="display:flex;width:50%">
                    <FormItem style="flex:1" :label="t('xBjbody.VENDOR')" type="string" v-model="costItem.form!.VENDOR" prop="VENDOR" :input-attr="{ placeholder: t('Please input field', { field: t('xBjbody.VENDOR') }) }" />
                    <el-button style="margin-left:16px" :icon="Search" circle @click="dialogVisible=true" />
                </div> -->
                <FormItem 
                :label="t('xBjbody.LOADTYPE')" 
                v-model="costItem.form!.LOADTYPE" 
                prop="LOADTYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=transitem'
                }"
                />
                <FormItem :label="t('xBjbody.UNITPRICE')" type="number" prop="UNITPRICE" v-model.number="costItem.form!.UNITPRICE" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('xBjbody.UNITPRICE') }),onChange:calNetPrice }" />
                <FormItem 
                :label="t('xBjbody.PRICETYPE')" 
                v-model="costItem.form!.PRICETYPE" 
                prop="PRICETYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=pricetype'
                }"
                />
                <FormItem 
                :label="t('xBjbody.TAXRATE')" 
                prop="TAXRATE" 
                v-model.number="costItem.form!.TAXRATE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'code',
                    field: 'codename',
                    'remote-url': codelib  + 'now?where=taxrate',
                    onChange:calNetPrice
                }"
                />
                <FormItem 
                :label="t('xBjbody.MONEYTYPE')" 
                v-model="costItem.form!.MONEYTYPE" 
                prop="MONEYTYPE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'MONEYTYPE',
                    field: 'CURNAME',
                    'remote-url': codelib + 'curr',
                    placeholder: t('Click Select'),
                }" 
                />
                
                <FormItem :label="t('xBjbody.NOTAXPRICE')" type="number" prop="NOTAXPRICE" v-model.number="costItem.form!.NOTAXPRICE" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('xBjbody.NOTAXPRICE') }) }" />
                <FormItem :label="'天数'" type="number" prop="TRANSDAYS" v-model.number="costItem.form!.TRANSDAYS" :input-attr="{ placeholder: t('Please input field', { field: t('xBjbody.TRANSDAYS') }) }" />
                <FormItem 
                :label="t('xBjbody.TXPLACE')" 
                v-model="costItem.form!.TXPLACE" 
                prop="TXPLACE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'remind',
                    field: 'remind',
                    placeholder: t('Click Select'),
                    'remote-url': '/admin/tz/all?sql='+`select remind from area where port='堆场'`
                }" 
                />
                
                <el-form-item :label="t('xBjline.LOADPLACE')" prop="LOADPLACE">
                    <el-select v-model="costItem.form!.LOADPLACE" placeholder="请选择" filterable style="width:100%">
                        <el-option v-for="item in regins" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="t('xBjline.DISPLACE')" prop="DISPLACE">
                    <el-select v-model="costItem.form!.DISPLACE" placeholder="请选择" filterable style="width:100%">
                        <el-option v-for="item in regins" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <FormItem 
                :label="t('xBjbody.RETURNPLACE')" 
                v-model="costItem.form!.RETURNPLACE" 
                prop="RETURNPLACE" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'remind',
                    field: 'remind',
                    placeholder: t('Click Select'),
                    'remote-url': '/admin/tz/all?sql='+`select remind from area where port='堆场'`
                }"
                />
                <FormItem :label="t('xBjbody.NOTE')" type="string" v-model="costItem.form!.NOTE" prop="NOTE" :input-attr="{ placeholder: t('Please input field', { field: t('xBjbody.NOTE') }) }" />
                <FormItem :label="t('xBjbody.OP')" type="string" v-model="costItem.form!.OP" prop="OP" :input-attr="{ placeholder: '当前登录人',disabled:true }" />
                <FormItem :label="t('xBjbody.OPTIME')" type="datetime" v-model="costItem.form!.OPTIME" prop="OPTIME" :input-attr="{ placeholder: '当前时间',disabled:true  }" />
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% -  80px)'">
                <el-button @click="costItem.operate = ''">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="costItem.submitLoading" @click="onSubmit(formRef)" type="primary">
                    {{ t('Save') }}
                </el-button>
            </div>
        </template>

        <el-dialog
            v-model="dialogVisible"
            title="供应商报价参考"
            width="40%"
            top="20vh"
        >
            <Vendor v-if="dialogVisible" @onVendorSelect="handleVendor"/>
        </el-dialog>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watchEffect,defineEmits,onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { codelib } from '/@/api/controllerUrls'
import createAxios from '/@/utils/axios'
import {
  Search,
} from '@element-plus/icons-vue'
import Vendor from './vendor.vue'

const emit = defineEmits(['on-submit'])

const formRef = ref<InstanceType<typeof ElForm>>()

interface costItemClass {
    operate:string,
    lineData?:anyObj,
    form?:anyObj,
}
const costItem = inject('costItem') as costItemClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    BJNO: [buildValidatorData({name: 'required', title: t('xBjbody.BJNO')})],
    COSTTYPE: [buildValidatorData({name: 'required', title: t('xBjbody.COSTTYPE')})],
    // BJNO: [buildValidatorData({name: 'required', title: t('xBjbody.BJNO')})],
    // BJNO: [buildValidatorData({name: 'required', title: t('xBjbody.BJNO')})],
    OPTIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('xBjbody.OPTIME') })})],
})

watchEffect(()=>{
    if(costItem.operate == '新增'){
        costItem.form!.BJNO = costItem.lineData.BJNO
        costItem.form!.LINEID = costItem.lineData.ID
        costItem.form!.MONEYTYPE = 'RMB'
        
        // costItem.form!.ID = costItem.lineData.ID
    }

    if( costItem.operate && costItem.form!.BJNO){
        window.setTimeout(()=>{
            getRegins()
        },100)
    }
})

const calNetPrice = ()=>{
    if(costItem.form!.UNITPRICE && costItem.form!.TAXRATE){
        costItem.form!.NOTAXPRICE = (costItem.form!.UNITPRICE / (1 + costItem.form!.TAXRATE)).toFixed(2)
    }
}

const onSubmit = ()=>{

    createAxios({
        method:'POST',
        url:costItem.operate=='新增'?'/admin/xBjbody/add':'/admin/xBjbody/edit',
        // url:'/admin/xBjbody/add',
        data:costItem.form
    }).then((res:any)=>{
        costItem.operate = ''
        emit('on-submit')
    })
    
}



const dialogVisible = ref(false)

const handleVendor = (item:any)=>{
    dialogVisible.value = false
    costItem.form!.VENDOR = item.corp
    costItem.form!.ITEMCODE = item.ITEMCODE
    costItem.form!.UNITPRICE = item.unitprice
    costItem.form!.PRICETYPE = item.pricetype
    costItem.form!.TAXRATE = item.taxrate
    costItem.form!.MONEYTYPE = item.moneytype
    costItem.form!.NOTAXPRICE = item.notaxprice
    costItem.form!.TRANSDAYS = item.transdays
    costItem.form!.TXPLACE = item.txplace
    costItem.form!.LOADPLACE = item.loadplace
    costItem.form!.DISPLACE = item.displace
    costItem.form!.RETURNPLACE = item.returnplace
}

onMounted(()=>{
    // getRegins()
})


const regins = ref([])

const getRegins = ()=>{
    createAxios({
        url:'/admin/XBjline/ywtype?BJNO='+costItem.form!.BJNO,
        method:'get'
    }).then((res:any)=>{
        regins.value = res.data
    })
}


</script>

<style scoped lang="scss"></style>
